<template>
<!--  html-->
    <div class="base">
        <h1>{{info}}</h1>
        <p>学生姓名:{{studentName}}</p>
        <p>学生年龄:{{age}}</p>
        <p>学生专业:{{major}}</p>
    </div>
</template>

<script>
  //js   模块化开发
 export default {
     name:'Student',
     data() {   // 组件中使用data  需要使用data函数形式 让组件中都拥有独立的data数据
         return {
             info: '学生信息展示',
             studentName: "tom",   //  通过this关键词可以直接访问在props中声明的参数
             age: 20,
             major: 'Java开发'
         }
     },
     methods:{

     }
 }

</script>

<!-- scoped 设置样式只对当前文件有效  -->
<style scoped>
/*css*/
    .base{
        width: 300px;
        height: 250px;
        border: 1px solid red;
        margin-bottom: 10px;
    }
</style>
